import "./style.scss";
import "../commom/common.scss";
// console.log(`%c详情`, 'color: red; font-size: 30px;')
const qs = require("querystring-es3");
import { getInterface } from "../service";
import { $, $all } from "../utils/util";

let search = location.search.slice(1);

const obj = qs.parse(search);

async function init() {
  const res = await getInterface(`/playlist/detail?id=${obj.id}`);
  let data = res.data;
  // console.log(data)
  render(data);
}
init();

function render(data) {
  $("header").innerHTML = `
    <div class="imgArea">
      <img src="${data.playlist.coverImgUrl}">
      <p>${(data.playlist.playCount / 10000).toFixed(2)}万</p>
    </div>
    <div><p>${data.playlist.name}</p><span>${data.playlist.creator.nickname}</span></div>
    <section class="backImg"></section>
    <span class ="toIndex">&lt;</span>
  `;
  $("header").style.background = `url(${data.playlist.coverImgUrl}) center`;
  $("header .backImg").style.cssText =
    `background:url(${data.playlist.coverImgUrl}) center/90% 100% ;`;
  $("main ul").innerHTML = data.playlist.tracks
    .slice(0, 10)
    .map((obj, index) => {
      // console.log(obj)
      return `<li songID="${obj.id}">
              <p>${index + 1}</p>
              <div>
                <section>
                  <p>${obj.name}</p>
                  <span>${obj.ar[0].name}-${obj.al.name}</span>
                </section>
                <i>播放</i>
              </div>
            </li>`;
    })
    .join("");
}

// 点击li跳转页面
$("main ul").addEventListener("click", (e) => {
  if (e.target.nodeName === "LI") {
    location.href =
      "https://music.163.com/m/song?id=" +
      e.target.getAttribute("songid") +
      "&";
  }
});

$("header").addEventListener("click", (e) => {
  if (e.target.className === "toIndex") {
    location.href = "http://localhost:25041/index.html";
  }
});
